<template>
  <div>
    <div class="content">
      <el-form ref="form" :model="form" label-width="200px">
        <el-form-item label="每日处理纺织品量：" style="width: 600px;font-size: 8ex" prop="jjFzpl"
                      :rules="[
            {required: true, message: '每日处理纺织品量不能为空',trigger: 'blur' }
          ]">
          <el-input v-model="form.jjFzpl" style="width: 100%;" placeholder="请输入内容">
            <template slot="append">t/d</template>
          </el-input>
        </el-form-item>

        <el-form-item label="单位基布使用成品药剂量：" style="width: 600px;font-size: 8ex" prop="jjYjl"
                      :rules="[
            {required: true, message: '单位基布使用成品药剂量不能为空',trigger: 'blur' }
          ]">
          <el-input v-model="form.jjYjl" style="width: 100%;" placeholder="请输入内容(0~1范围内)">
            <template slot="append">（百分比请换算成小数填入）</template>
          </el-input>
        </el-form-item>

        <el-form-item label="化学物质在成品药剂中的有效成分含量：" style="width: 600px;font-size: 8ex" prop="jjYxcfhl"
                      :rules="[
            {required: true, message: '化学物质在成品药剂中的有效成分含量不能为空',trigger: 'blur' }
          ]">
          <el-input v-model="form.jjYxcfhl" style="width: 100%;" placeholder="请输入内容(0~1范围内)">
            <template slot="append">（百分比请换算成小数填入）</template>
          </el-input>
        </el-form-item>

        <el-form-item label="含待评估化学物质的染料、助剂或基础化学品每日纺织品比率：" style="width: 600px;font-size: 8ex" prop="jjFzpbl"
                      :rules="[
            {required: true, message: '纺织品比率不能为空',trigger: 'blur' }
          ]">
          <el-input v-model="form.jjFzpbl" style="width: 100%;" placeholder="请输入内容(0~1范围内)">
            <template slot="append">（百分比请换算成小数填入）</template>
          </el-input>
        </el-form-item>
        <el-col :span="23"><div class="grid-content bg-purple">计算预处理工序中废水排放量填写以下项</div></el-col>
        <br>
        <br>
        <el-form-item label="上游环节带入浆料油剂比重：" style="width: 600px;font-size: 8ex" prop="yjbz"
                      :rules="[
            {required: true, message: '油剂比重不能为空',trigger: 'blur'}
          ]">
          <el-input v-model="form.yjbz" style="width: 100%;" placeholder="请输入内容(0~1范围内)">
            <template slot="append">（百分比请换算成小数填入）</template>
          </el-input>
        </el-form-item>

      </el-form>
      <br>
      <br>
      <el-button style="margin-top: 12px;" @click="goBack">上一步</el-button>
      <el-button style="margin-top: 12px;" @click="sendIndirectUsage">下一步</el-button>
    </div>

  </div>

</template>

<script>

  export default {
    name: "IndirectUsage",
    data(){
      return{
        form:{
          jjPzpl:"",
          jjYjl:"",
          jjYxcfhl:"",
          jjFzpbl:"",
          yjbz:"",
        },
      }
    },
    watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
      'form.jjYjl':function (newVal, oldValue) {
        if (parseFloat(newVal) < 0 || parseFloat(newVal) > 1) {
          this.form.jjYjl = ''
          this.$message({
            message: "数值只能在0-1之间",
            type: 'warning'
          });
        }
      },
      'form.jjYxcfhl':function (newVal, oldValue) {
        if (parseFloat(newVal) < 0 || parseFloat(newVal) > 1) {
          this.form.jjYxcfhl = ''
          this.$message({
            message: "数值只能在0-1之间",
            type: 'warning'
          });
        }
      },
      'form.jjFzpbl':function (newVal, oldValue) {
        if(parseFloat(newVal) < 0 || parseFloat(newVal) > 1){
          this.form.jjFzpbl = ''
          this.$message({
            message: "数值只能在0-1之间",
            type: 'warning'
          });
        }
      },
      'form.yjbz':function (newVal, oldValue) {
        if(parseFloat(newVal) < 0 || parseFloat(newVal) > 1){
          this.input_1 = ''
          this.$message({
            message: "数值只能在0-1之间",
            type: 'warning'
          });
        }
      },
    },
    methods:{
      goBack(){
        this.$emit('goBack');
      },
      sendIndirectUsage(){
        if(this.form.jjFzpl!=''){
          if(this.form.jjYjl!=''){
            if(this.form.jjYxcfhl!=''){
              if(this.form.jjFzpbl!=''){
                //let flag = {flag:'1'};
                let usageParameter = {flag:'2',jjFzpl:this.form.jjFzpl,jjYjl:this.form.jjYjl,jjYxcfhl:this.form.jjYxcfhl,jjFzpbl:this.form.jjFzpbl,yjbi:this.form.yjbz,zjWzyl:'',zjDjl:'',zjPfyzb:'',zjJobtime:''}
                this.$store.commit("setIndirectUsage",usageParameter);
                this.$emit('listenChild');
              }
              else{
                this.$message("每日纺织品比率不能为空")
              }
            }
            else{
              this.$message("有效成分含量不能为空")
            }
          }
          else{
            this.$message("单位基布使用成品药剂量不能为空")
          }
        }
        else{
          this.$message("每日处理纺织品量不能为空")
        }

      }
    },

  }
</script>

<style scoped lang="scss">

</style>
